<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Schema Builder</title>

    <!-- === START: SOCIAL & SEO META TAGS === -->
    <meta name="description" content="A powerful, visual GUI for developers to create and manage JSON Schemas, with first-class support for OpenAI and LLM function calling definitions.">
    
    <!-- Open Graph / Facebook / Discord -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://anusarati.github.io/json-schema-builder/">
    <meta property="og:title" content="JSON Schema Builder">
    <meta property="og:description" content="A powerful, visual GUI for developers to create and manage JSON Schemas, with first-class support for OpenAI and LLM function calling definitions.">
    <meta property="og:image" content="https://raw.githubusercontent.com/anusarati/json-schema-builder/main/docs/screenshot.png">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://anusarati.github.io/json-schema-builder/">
    <meta property="twitter:title" content="JSON Schema Builder">
    <meta property="twitter:description" content="A powerful, visual GUI for developers to create and manage JSON Schemas, with first-class support for OpenAI and LLM function calling definitions.">
    <meta property="twitter:image" content="https://raw.githubusercontent.com/anusarati/json-schema-builder/main/docs/screenshot.png">
    <!-- Optional: Add your Twitter handle -->
    <!-- <meta name="twitter:creator" content="@YourTwitterHandle"> -->
    <!-- === END: SOCIAL & SEO META TAGS === -->
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <!-- Light & Dark themes for highlight.js (these are fine to keep from CDN) -->
    <link rel="stylesheet" id="hljs-light-theme" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" disabled>
    <link rel="stylesheet" id="hljs-dark-theme" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" disabled>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>

    <script>
        // This script for theme flashing remains the same.
        if (localStorage.getItem('schemaBuilderTheme') === 'dark' || (!('schemaBuilderTheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
            document.getElementById('hljs-dark-theme')?.removeAttribute('disabled');
        } else {
            document.documentElement.classList.remove('dark');
            document.getElementById('hljs-light-theme')?.removeAttribute('disabled');
        }
    </script>
    
    <!-- This single line loads all your application's styles, compiled by Vite. -->
    <link rel="stylesheet" href="/main.css">
</head>
<body class="antialiased">

    <div id="app-root"></div>

    <script type="module" src="/js/main.js"></script>
</body>
</html>
